@import "./../../../assets/styles/common.scss";
.window {
    @include window;
    .windowBar {
        text-align: right;
        padding: 0 10px 10px 0;
        @include background-color-two(rgba(0,143,195,0.6),#007098);
        span {
            position: absolute;
            top: 5px;
            left: 10px;
            color: #fff;
        }
        .close {
            @include window-bar-but(#ff728d,#fe4568,#ff728d);
        }
        .small {
            @include window-bar-but(#e0dc69,#d3cd20,#e0dc69);
        }
        .large {
            @include window-bar-but(#85f28a,#5bd761,#85f28a);
        }
    }
    .content {
        height: 95%;
        overflow-y: auto;
        margin: auto;
        width: 100%;
        position: relative;
        background-color: #eee;
        .header {
            height: 120px;
            width: 100%;
            position: absolute;
            background-color: #222;
            z-index: 100;
            text-align: center;
            -moz-box-shadow: 0 1px 1px #888;
            /* 老的 Firefox */
            box-shadow: 0 1px 1px #555;
            .planet_wraper {
                z-index: 0;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100px;
                height: 100px;
                margin: auto;
                border-radius: 50%;
            }
            .planet_shadow {
                background-image: linear-gradient(top left, #24b88b 20%, #21776f);
                background-image: -moz-linear-gradient(top left, #24b88b 20%, #21776f);
                box-shadow: inset 0 -5px 10px rgba(22, 48, 64, 0.5), 0 0 1.5rem rgba(170, 194, 194, 0.3);
            }
            .planet {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                animation: rotate 15s linear infinite;
                overflow: hidden;
            }
            .planet_wraper::after,
            .planet_wraper::before {
                content: '';
                display: block;
                position: absolute;
                border-radius: 50%;
                box-shadow: 0 0.1rem 0.1rem rgba(170, 194, 194, 0.1), inset 0 -0.1rem 0.1rem rgba(170, 194, 194, 0.1);
                animation: rotate 5s linear infinite;
            }
            .planet > * {
                position: relative;
                border-radius: 50%;
                background-color: #209b85;
                box-shadow: inset 1px 1px 5px #163040, 0 0 7px #63eed2;
                opacity: 0.3;
            }
            .crater:nth-of-type(1) {
                top: 2rem;
                left: 1.5rem;
                width: 0.75rem;
                height: 0.75rem;
            }
            .crater:nth-of-type(2) {
                top: -0.75rem;
                left: 5rem;
                width: 2.5rem;
                height: 2.5rem;
            }
            .crater:nth-of-type(3) {
                top: 0.5rem;
                left: 2rem;
                width: 1.25rem;
                height: 1.25rem;
            }
            .crater:nth-of-type(4) {
                top: -1.5rem;
                left: 3.5rem;
                width: 0.5rem;
                height: 0.5rem;
            }
            .crater:nth-of-type(5) {
                top: 1.25rem;
                left: 3.5rem;
                width: 2rem;
                height: 1.5rem;
            }
            @keyframes bg {
                to {
                    background-position: center 20rem;
                }
            }
            @keyframes rotate {
                to {
                    transform: rotate(360deg);
                }
            }
            input {
                position: relative;
                z-index: 2;
                margin-top: 30px;
                width: 250px;
                background-color: rgba(255,255,255,0.1);
                color: #fff;
                height: 25px;
                line-height: 25px;
                border: 1px solid #999;
                outline: none;
                font-size: 18px;
                text-indent: 1em;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                border-right: 0;
            }
            .search {
                background-color: #209b85;
                // box-shadow: inset 1px 1px 1px #163040;
                padding: 5.5px;
                border: 1px solid #999;
                cursor: pointer;
                position: relative;
                left: -5.5px;
                color: #fff;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                &:hover {
                    background-color: #163040+#209b85;
                }
                &:active {
                    background-color: #209b85;
                }
            }
            .hotSearch {
                margin-top: 20px;
                color: #ddd;
                position: relative;
                z-index: 2;
                span {
                    cursor: pointer;
                    margin-right: 5px;
                    text-decoration: underline;
                    &:hover {
                        color: #fff;
                    }
                }
            }
        }
        .cardBox{
          height: calc(100% - 120px);
          overflow-y: auto;
          position: absolute;
          padding-top: 120px;
          width: 100%;
        }
    }
}
